import { _decorator, Button, Label, Node, tween, Tween, UITransform, v3, Widget } from 'cc';
import { BasePopUp } from '../../../frame/component/ui.pop-up';
import Config from '../../manager/config.manager';
import GameDC from '../../manager/data.game.center';
import GameAssets from '../../manager/game.assets';
import { Float } from '../page/float';
import type { Popup } from '../page/popup';
const { ccclass, property } = _decorator;

@ccclass('Free')
export class Free extends BasePopUp<typeof Popup, null> {
	protected default_return: null;

	private uitrans: UITransform;
	private ui_container: UITransform;
	private ui_real_item: UITransform;
	private lbl_symbol: Label;
	private item_step = 70;
	private spt_light: Node;

	private va_real: mtec.cc.VecAssist;

	protected initAfterOnLoad(){
		this.uitrans = this.node.getComponent(UITransform);
		this.ui_container = this.node.getChildByName('container').getComponent(UITransform);
		this.ui_real_item = this.__btn_map__.get('close').node.parent.getComponent(UITransform);
		this.va_real = new mtec.cc.VecAssist(this.ui_real_item.node);
		this.lbl_symbol = this.ui_real_item.node.getChildByName('lbl-symbol').getComponent(Label);
		this.spt_light = this.ui_real_item.node.getChildByName('light');

		this.renderLocalUI();
	}

	protected _click_event_: { [name: string]: (this: Free, button: Button) => void; } = {
		close(btn){
			btn.interactable = false;
			this.leave();
		},
		free(btn){
			btn.interactable = false;
			Float.Hint(GameAssets.getLangText(4))
			.then(()=>btn.interactable = true);
		}
	}

	public onShow(){
		this.refresh(GameDC.User.round);
		this.enter();
	}

	private renderLocalUI(){
		(<const>[
			['free', 6],
			['desc', 20],
			['desc2', 22],
		]).forEach(([name, idx])=>{
			this.ui_real_item.node.getChildByName('lbl-'+name).getComponent(Label).string = GameAssets.getLangText(idx);
		});

		mtec.cc.skinPeeler(this.ui_real_item.node.getChildByName('icon-symbol'), GameAssets.getCounTexture(5), {height: true});
	}

	private refresh(curr_round: number){
		this.calculate();

		// round: 1; cur_idx: 0; show_item: 3
		// round: 2; cur_idx: 1; show_item: 2 3
		// round: 3; cur_idx: 2; show_item: 1 2 3
		// round: 4; cur_idx: 3; show_item: 0 1 2 3

		// cur_idx: 0; 3: 1
		// cur_idx: 1; 3: 2; 2: 1
		// cur_idx: 2; 3: 3; 2: 2; 1: 1
		// cur_idx: 3; 3: 4; 2: 3; 1: 2; 0: 1

		let max_idx = 3;
		let cur_idx = curr_round-1;
		let top_y = this.va_real.top - (this.ui_container.height - this.ui_real_item.height - curr_round * this.item_step) / 2;

		this.ui_container.node.children.forEach((n, i)=>{
			n.active = (i+cur_idx) >= max_idx;
			if(n.active){
				n.setPosition(n.position.x, top_y, n.position.z);
				let show_round = (cur_idx+1) - (max_idx - i);
				n.getChildByName('lbl-head').getComponent(Label).string = GameAssets.getLangText(19, show_round);
			}
		});

		this.lbl_symbol.string = Config.symbolString(GameDC.User.symbol);
	}

	private enter(){
		let time_step = 0.1;
		this.ui_container.node.children.filter(n=>n.active).forEach((n, i, ls)=>{
			Tween.stopAllByTarget(n);

			tween(n)
			.to(time_step * i, {position: v3(n.position.x, n.position.y - i * this.item_step, n.position.z)}, {easing: 'bounceOut'})
			.start();
		});

		tween(this.spt_light)
		.set({angle: 0}) .to(5, {angle: -360}) .union()
		.repeatForever() .start();
	}

	private leave(){
		let time_step = 0.1;
		let list = this.ui_container.node.children.filter(n=>n.active);

		let target_potisition = this.ui_real_item.node.position.clone();

		let np = new mtec.NudityPromise<'end'>();
		list.forEach((n, i, ls)=>{
			Tween.stopAllByTarget(n);

			tween(n)
			.to(time_step * (ls.length - 1 - i), {position: target_potisition}, {easing: 'cubicOut'})
			.call(()=>i==0 ? np.resolve('end') : null)
			.start();
		});

		np.promise.then(()=>{
			this.close(null);
			this.__btn_map__.get('close').interactable = true;
			Tween.stopAllByTarget(this.spt_light);
			this.spt_light.angle = 0;
		});
	}

	private calculate(){
		let wgt = this.ui_container.getComponent(Widget);
		if(wgt){
			wgt.isAlignTop = true;
			wgt.isAlignBottom = true;
			wgt.isAbsoluteTop = true;
			wgt.isAbsoluteBottom = true;
			wgt.top = 100 + (mtec.cc.is_long_screen ? 100 : 0);
			wgt.bottom = 618;
			wgt.updateAlignment();
		}

		this.item_step = Math.min(70, (this.ui_container.height - this.ui_real_item.height) / 3);
	}
}

